@function image-triangle($color: #000) {
  $color: rgb(red($color), green($color), blue($color));
  @return "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%2232%22%20height%3D%2224%22%20viewBox%3D%220%200%2032%2024%22%3E%3Cpolygon%20points%3D%220%2C0%2032%2C0%2016%2C24%22%20style%3D%22fill%3A%20#{$color}%22%3E%3C/polygon%3E%3C/svg%3E";
}

@mixin image-checkmark($color: #000) {
  $color: rgb(red($color), green($color), blue($color));
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" viewBox="0 0 32 32"><path fill="#{$color}" d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm6.906 8.875l2.219 2.031-12.063 13.281-6.188-6.188 2.125-2.125 3.938 3.938 9.969-10.938z"/></svg>');

  // IE10 fallback, since it doesn't support SVG data URLs
  @media screen and (min-width:0\0) {
    @if lightness($color) < 60% {
      background-image: url('');
    }
    @else {
      background-image: url('');
    }
  }
}
